<template>
  <el-container class="selfDiv" >
    <div >
      <h2>浙江仓禾农田大数据管控平台</h2>
      <div ></div>
    </div>
    <div >
      <span>{{timeValue}}</span>
    </div>
  </el-container>
</template>

<script>
import moment from 'moment'
export default {
    name: 'topPanel',
    components: {},
    data() {
      return{
        timeValue: ''
      }
    },
    computed: {
    },
    mounted() {
      moment.locale('zh-cn');
      let timer = null,
      me = this,
      setTimeValue = () => {
        clearTimeout(timer);
        me.timeValue = moment().format('YYYY年MM月DD日, hh:mm:ss a');
        timer = setTimeout(setTimeValue, 1000);
      }
      setTimeValue();
    }
}
</script>

<style lang="scss" scoped>
.selfDiv{
  z-index: 500;
  position: fixed;
  background: transparent;
  justify-content: space-between;
  background: url(/src/assets/img/top-2.png);
  background-repeat: no-repeat;
  background-size: 100% 40%;
  >:nth-child(1){
    height: 100%;
    width: 25%;
    background: url(/src/assets/img/top-1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    >h2 {
      height: 20px;
      font-size: 24px;
      font-weight: bold;
      font-style: italic;
      color: #FFFFFF;
      line-height: 21px;
      margin-top: 13px;
      margin-bottom: 7px;
      margin-right: 20%;
    }
    >div{
      height: 16px;
      width: 80%;
      background: url(/src/assets/img/top-3.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 10%;
    }
  }
  >:nth-child(2){
    color: floralwhite;
  }
}
</style>
